<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1> {{msg}} </h1>
        <img :src="imgUrl" alt="">

        <div :[key]="value">单个属性的动态绑定</div> <!-- 单个属性的动态绑定-->

        <a :="{href:url,id:id}">多个属性的动态绑定</a>
        <!--
            多个属性的动态绑定,如果绑定的属性名称已经在标签中存在，那么按编写的顺序后面覆盖前面
            <a id="888" :="{href:url,id:id}"></a> 最终显示id=123
            <a :="{href:url,id:id}" id="888"></a> 最终显示id=888
        -->
    </div>
</body>

<script>
    const {createApp} = Vue;
    const app = createApp({
        data() {
            return {
                msg: "v-bind",
                imgUrl: "https://cn.vuejs.org/images/logo.png",
                key: "active",
                value:"test",
                url: "https://www.baidu.com",
                id: "123"
                
            }
        }
    }).mount("#app");

</script>
</html>